<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Untitled Document</title>
		<script type="text/javascript" src="Property.js"></script>
		<script type="text/javascript">

function Elem(el){
	this.el=(typeof(el)=="string")?document.getElementById(el):el;
	this.id=this.el.id;
	this.el.thisEl=this;
	prop.Property.init(this,["x"]);
}
/**
 * X position of the element
 * @type {prop.Property} X pos
 */
Elem.prototype.x={
	get:function(){
		return parseFloat(this.el.style.left);
	},
	set:function(value){
		this.el.style.left=value+"px";
	}
};
var test, other;


		</script>
	</head>
	<body>
		<div id="test" style="position:absolute;left:100px;top:100px;width:100px;height:100px;border: 1px solid black;background:red;">
			Left: 100px
		</div>
		<div id="other" style="position:absolute;left:300px;top:100px;width:50px;height:20px;border: 1px solid black;background:blue;">
		inner
		</div>
		<button onclick="alert(test.x.get());">get()</button>
		<button onclick="test.x.set(10);">set(10)</button>
		<button onclick="test.x.add(10);">add(10)</button>
		<button onclick="test.x.add(-10);">add(-10)</button>
		<button onclick="other.x.set(test.x);">movo to</button>
		<button onclick="other.x.unbind();">Unbind</button>
		<button onclick="other.x.bind(test.x);">Bind, no offset</button>
		<script type="text/javascript">
			test=new Elem("test");
			other=new Elem("other");
			
			other.x.bind(test.x, function(v){
				return v+10;
			});
		</script>
	</body>
</html>
